<!--消息页面-->
<template>
    <div class="body-bac-container">
        <div class="message-list-container container">
            <!--左边-->
            <el-row>
                <!--右边-->
                <el-col :span="6" class="col-left ">
                    <!--导航--->
                    <div class="left-container bac-container ">
                        <el-menu default-active="leave-message-list" :router="true" @select="getCount">
                            <el-menu-item index="leave-message-list">
                                <i class="el-icon-third-messagecenter"></i>
                                <span slot="title">留言<el-badge :is-dot="countList[1]" class="item"></el-badge>
                                </span>

                            </el-menu-item>
                            <el-menu-item index="my-message-list">
                                <i class="el-icon-third-messagecenter"></i>
                                <span slot="title">我的留言<el-badge :is-dot="countList[1]" class="item"></el-badge>
                                </span>

                            </el-menu-item>
                            <el-menu-item index="comment-message-list">
                                <i class="el-icon-third-comments"></i>
                                <span slot="title">评论<el-badge :is-dot="dynamicCountList[0]" class="item"></el-badge>
                                </span>
                            </el-menu-item>
                            <el-menu-item index="like-message-list">
                                <i class="el-icon-third-good"></i>
                                <span slot="title">赞<el-badge :is-dot="dynamicCountList[1]" class="item"></el-badge></span>
                            </el-menu-item>
                            <el-menu-item index="new-fans-message-list">
                                <i class="el-icon-third-Customermanagement"></i>
                                <span slot="title">新粉丝<el-badge :is-dot="countList[2]" class="item"></el-badge></span>
                            </el-menu-item>
                            <el-menu-item index="system-message-list">
                                <i class="el-icon-third-notice"></i>
                                <span slot="title">系统消息<el-badge :is-dot="countList[0]" class="item"></el-badge></span>
                            </el-menu-item>
                        </el-menu>
                    </div>
                </el-col>
                <el-col :span="18" class="col-right">
                    <router-view></router-view>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                countList: [false,false,false],
                dynamicCountList: [false,false]
            }
        },
        methods: {
            getCount() {
                this.$post("/user/message/getCountByType").then((res) => {
                    this.countList=[false,false,false];
                    for(let i in res.data) {
                        this.$set(this.countList,i,res.data[i] > 0 ? true : false)
                    }
                }).catch(err => {
                    console.log(err)
                })

                this.$post("/dynamic/message/getCountByType").then((res) => {
                    this.dynamicCountList=[false,false];
                    for(let i in res.data) {
                        this.$set(this.dynamicCountList,i,res.data[i] > 0 ? true : false)
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        },
        mounted() {
            this.getCount();
        }
    }
</script>

<style>
    .message-list-container {
        position: relative;
    }

    .message-list-container .left-container .el-menu {
        border: none;
    }

    .message-list-container .left-container .el-menu .el-menu-item {
        font-size: 15px;
    }

    .message-list-container .left-container .el-menu .el-menu-item .el-badge {
        margin-left: 5px;
        margin-top: -10px;
    }

    .message-list-container .left-container .el-menu-item [class^=el-icon-] {
        font-size: 26px;

    }

    .message-list-container .col-right-top {
        height: 42px;
        width: 100%;
        color: #333;
    }


    .message-list-container .top-title {
        font-size: 14px;
        font-weight: 600;
        display: inline-block;
        padding: 0 10px;
        margin: 0 10px;
        line-height: 40px;
        border-bottom: 2px solid #007cdc;
    }

    .message-list-container .top-operate {
        height: 28px;
        vertical-align: middle;
        padding: 5px;
        margin: 3px 10px 0;
        display: flex;
        float: right;
    }

    .message-list-container .batch-container .el-button--mini {
        padding: 3px 5px
    }

    .empty-message {
        height: 100px;
        padding-top: 20px;
        text-align: center;
        line-height: 40px;
        font-size: 12px;
        color: #909399;
    }

    /**
       默认列表
        */
    .message-list-container .message-list {
    }

    .message-list-container .el-pagination {
        text-align: center;
    }

    .message-list-container .message-list .message-item {
        padding: 10px 0px 0px 10px;
        margin-bottom: 10px;
        border-top: 1px solid #E4E7ED;
        clear: both;
        position: relative;
        overflow: hidden;
    }

    .message-list-container .message-list .message-item:first-child {
        padding-top: 0px;
    }

    .message-list-container .message-list .message-data-item i {
        font-size: 20px;
    }

    .message-list-container .message-list .message-item:first-child {
        border: none;
    }

    .message-list-container .message-list .message-avatar {
        width: 50px;
        height: 100%;
        float: left;
        cursor: pointer;
    }

    .message-list-container .message-list .message-data {
        font-size: 12px;
        line-height: 20px;
        float: left;
        color: #909399;
        cursor: pointer;
    }

    .message-list-container .message-list .message-right-data {
        float: right;
    }

    .message-list-container .message-list .user-name {
        line-height: 30px;
        font-size: 14px;
        font-weight: 700;
        color: #303133;
    }

    .message-list-container .message-image {
        width: 120px;
        height: 80px;
        cursor: pointer;
    }

    .message-list-container .dynamic-title {
        width: 110px;
        height: 70px;
        padding: 5px;
        line-height: 24px;
        color: #303133;
        overflow: hidden;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        background-color: #F2F6FC;
    }

    .message-list-container .message-list .message-data-item {
        display: block;
        overflow: hidden;

    }

    .message-list-container .message-context .el-link {
        font-size: 13px;
        font-weight: 500;
    }

    .message-list-container .message-list .user-operate {
        position: absolute;
        right: 0;
        top: 5px;
    }


    .message-list-container .batch-checkbox {
        position: absolute;
        left: 0px;
        top: 0px;
    }

    .message-list-container .batch-checkbox .el-checkbox__label {
        display: none;
    }

</style>
